<template>
    <div class="side-bar">
		<div class="top-part">
			<div class="title-wrap">
				<img src="../assets/skylogo.png" alt="">
				<div class="logo-desc">
					固定资产2.0
				</div>
			</div>
			
			<div class="side-user-wrap">
				<div class="switch-part">
					<div class="sys-wrap hasoa"  :class="{'setenterclass':setenterclass, 'selfclass':selfclass}"  @mouseenter="selfenter" @mouseleave="selfleave">
						<div class="sanjiao"></div>
						<img class="fanhuipic" @click="gohome" src="../assets/fanhuipic.png" alt="">
							<a-badge :count="numData.xingzhengbangong">
								<img @click="switchpage(1)" src="../assets/bangong2.png" alt="">
							</a-badge>
							<a-badge :count="numData.caiwuerdianling">
							  <img @click="switchpage(2)" src="../assets/caiwu2.png" alt="">
							</a-badge>
							<a-badge :count="numData.chuchaisan">
							  <img @click="switchpage(3)" src="../assets/chuchai3.png" alt="">
							</a-badge>
							<a-badge :count="numData.kejifuwu">
							  <img @click="switchpage(4)" src="../assets/keji2.png" alt="">
							</a-badge>
							
							
							<a-badge :count="numData.keyanxitong">
							  <img @click="switchpage(5)" src="../assets/keyan2.png" alt="">
							</a-badge>
							<a-badge :count="numData.renshixitong">
							  <img @click="switchpage(6)" src="../assets/renzi1.png" alt="">
							</a-badge>
							
							<!-- <a-badge :count="numData.gudingzichanyi">
							 <img @click="switchpage(8)" src="../assets/zichan1.png" alt="">
							</a-badge> -->
							
							<a-badge :count="numData.shitangxitong">
							 <img  @click="switchpage(7)" src="../assets/shitang.png" alt="">
							</a-badge>
							<a-badge :count="numData.houqinxitong">
							 <img @click="switchpage(8)" src="../assets/houqin.png" alt="">
							</a-badge>
							<img  @click="switchpage(9)" src="../assets/wenjianbaohu.png" alt="">
							<a-badge>
							 <img @click="switchpage(10)" src="../assets/yonghuzhongxin.png" alt="">
							</a-badge>
							<img v-show="ishongtu" @click="switchpage(11)" src="../assets/hongtuoa.png" alt="">
							
							<div  style="width:80px"></div>
							<div  style="width:80px"></div>
							<div  style="width:80px"></div>
							<div  style="width:80px"></div>
						
					</div>
					<!-- <a-popconfirm
					 id="reset-switch"
					 trigger="hover"
					    placement="right"
					    title=""
					   
					  >
					  
					  </a-popconfirm> -->
					   <a-tooltip placement="topLeft">
					          <template #title>
					            <span>点击注销系统</span>
					          </template>
					         <img @click="logout" src="../assets/logout.png" alt="">
					        </a-tooltip>
					    <img style="width:16px;height:16px" @mouseenter="setenter" @mouseleave="setleave" src="../assets/sysswitch.png" alt="">
					   
					   
					
				</div>
				<div class="user-wrap">
					<img src="../assets/sideuser.png" alt="">
				</div>
				<div class="user-wrap">
					{{userInfo.username}}
				</div>
				<div class="title-part">
					<div class="left">
						部门
					</div>
					<div class="right">
						职务
					</div>
				</div>
				<div class="user-info-wrap">
					<div class="left-part">
						<!-- <div class="label-top">部门</div> -->
						<div>{{userInfo.officeName}}</div>
					</div>
					<div class="line-splid">
						
					</div>
					<div class="right-part">
						<!-- <div class="label-top">职务</div> -->
						<div>{{userInfo.userWork}}</div>
						
					</div>
				</div>
			</div>
			<div class="switch-year">
				<div style="width:43px">
					年度：
				</div>
				<!-- <div class="opacity">{{nowyear}}</div> -->
				<a-date-picker class="no-bg-picker" style="width:94px"  :value-format="YYYY" @change="yearChange"   :autofocus="false" placeholder="" :allowClear="false" v-model:value="nowyear" suffix-icon="[ 切换 ]" picker="year" >[ 切换 ]</a-date-picker>
				<!-- 年度：2023 <span class="click-year">[ 切换 ]</span> -->
			</div>
		</div>
		<div class="menu-part">
			<a-menu
			      v-model:selectedKeys="selectedKeys"
				  :open-keys="openKeysdata"
				   @click="clickMenu"
			      style="width: 100%"
				 
				  @openChange="onOpenChange"
				  :triggerSubMenuAction="'click'"
			      mode="inline"
			    >
				 <template v-for="(item,index) in menuList" :key="index">
					<template v-if="!item.children">
						<a-menu-item :key="item.menuUrl">
							<template #icon>
							  <img :src="`/assetSystem/menuimg/${item.icon}.png`" alt="">
							</template>
							<span>{{ item.menuName }}</span>
						</a-menu-item>
					</template>
					<template v-else>
						
						<a-sub-menu  :key="item.menuUrl">
							<template #icon>
							  <img :src="`/assetSystem/menuimg/${item.icon}.png`" alt="">
							  
							</template>
							<template #title>{{ item.menuName }}</template>
							<a-menu-item v-for="items in item.children"  :key="items.menuUrl">{{ items.menuName }}</a-menu-item>
						</a-sub-menu>
					</template>
				</template>
				
				
				
				
				
				
				<!-- <a-menu-item key="home">
					<template #icon>
					  <img src="../assets/homemenu.png" alt="">
					</template>
					首页
				</a-menu-item>
				<a-menu-item key="assetsplan">
					<template #icon>
					  <img src="../assets/jihuamenu.png" alt="">
					</template>
					采购计划
				</a-menu-item>
			      <a-sub-menu key="jihuabianzhi">
			        <template #icon>
			          <img src="../assets/zichancaigoumenu.png" alt="">
					  
			        </template>
			        <template #title>资产采购 </template>
			        <a-menu-item key="assetsrecord">采购记录</a-menu-item>
			        <a-menu-item key="checkassets">采购审批</a-menu-item>
					 <a-menu-item key="checkassetshas">已审批采购</a-menu-item>
			       
			      </a-sub-menu>
			      <a-sub-menu key="acceptassets">
			        <template #icon>
						<img src="../assets/zichanyanshou.png" alt="">
					</template>
			        <template #title>
			         
			          资产验收
			        </template>
			        <a-menu-item key="acceptrecord">验收记录</a-menu-item>
			        <a-menu-item key="checkaccept">验收审批</a-menu-item>
					 <a-menu-item key="checkaccepthas">已审批验收</a-menu-item>
					
			      </a-sub-menu>
			      <a-sub-menu key="changeassets">
			        <template #icon>
			          <img src="../assets/zichanbiangeng.png" alt="">
			        </template>
			        <template #title>资产变更</template>
			        <a-menu-item key="usestate">使用情况</a-menu-item>
			        <a-menu-item key="changerecord">变更记录</a-menu-item>
			        <a-menu-item key="checkchange">变更审批</a-menu-item>
					<a-menu-item key="checkchangehas">已审批变更</a-menu-item>
			       
			      </a-sub-menu>
				  
				  <a-sub-menu key="joinassets">
				    <template #icon>
				      <img src="../assets/zichandiaoru.png" alt="">
				    </template>
				    <template #title>资产调入</template>
				   
				    <a-menu-item key="joinrecord">调入记录</a-menu-item>
				    <a-menu-item key="checkjoin">调入审批</a-menu-item>
					 <a-menu-item key="checkjoinhas">调入已审批</a-menu-item>
				   
				  </a-sub-menu>
				  <a-sub-menu key="handleassets">
				    <template #icon>
				      <img src="../assets/zichanchuzhi.png" alt="">
				    </template>
				    <template #title>资产处置</template>
				   
				    <a-menu-item key="handlerecord">处置记录</a-menu-item>
				    <a-menu-item key="checkhandle">处置审批</a-menu-item>
					<a-menu-item key="checkhandlehas">处置已审批</a-menu-item>
				   
				  </a-sub-menu>
				  <a-sub-menu key="manassets">
				    <template #icon>
				      <img src="../assets/zichanguanli.png" alt="">
				    </template>
				    <template #title>资产管理</template>
				   
				    <a-menu-item key="myassets">我的资产</a-menu-item>
					<a-menu-item key="depassets">部门资产</a-menu-item>
					<a-menu-item key="allassets">院资产</a-menu-item>
					
					<a-menu-item key="cardman">资产管理</a-menu-item>
					
					<a-menu-item key="clearassets">资产清查</a-menu-item>
				   
				  </a-sub-menu>
				  
				 
				 
				  
				  <a-sub-menu key="sysman">
				    <template #icon>
				      <img src="../assets/xitongguanli.png" alt="">
				    </template>
				    <template #title>系统管理</template>
					<a-menu-item key="roleman">角色管理</a-menu-item>
				    <a-menu-item key="noticeman">通知公告</a-menu-item>
				    <a-menu-item key="userman">人员管理</a-menu-item>
				    <a-menu-item key="dataword">数据字典</a-menu-item>
					<a-menu-item key="assettypeman">国标大类</a-menu-item>
					<a-menu-item key="menuman">菜单管理</a-menu-item>
				  </a-sub-menu> -->
			    </a-menu>
		</div>
		<!-- <div class="bottom-part">
			<div class="logout" @click="logout">
				<img src="../assets/logout.png" alt="">
				<span>注销登录</span>
			</div>
			<div class="author">
				©2023 Hongtu Co.,LTD
			</div>
		</div> -->
	</div>
	
	
	
	
	 <a-modal
	     v-model:visible="logoutsure"
	 		  centered
	 		  width="420px"
	 		  class="no-top-line"
	     title="退出提示"
	     ok-text="确定"
	     cancel-text="取消"
	 		  :ok-button-props="{ shape:'round' }"
	 		  :cancel-button-props="{ shape:'round' }"
	     @ok="hideModal"
	   >
	    <div style="display:flex;align-items:center">	
	 			<img style="width:20px;margin-right:12px" src="./tip.png" alt="">
	 			<span style="color:rgb(96, 98, 102);font-weight: bold;font-size:18px">确认退出系统?</span>
	 		 </div>
	 		 <template #closeIcon>
	 		    <img style="width:28px;position:relative;right:19px" src="./cuo.png" alt="">
	 		 </template>
	       <template #footer>
	           <a-button   shape='round' @click="logoutsure=false">取消</a-button>
	           <a-button   shape='round' type="primary"  @click="hideModal(true)">确定</a-button>
	       </template>
	   </a-modal>
</template>

<script>
import axios from 'axios';
import {assetapisystemmenugetMenuListByRole,assetapisystemdictgetDict} from '../../api/manpart.js'
import bus from './bus';
import {useRouter} from 'vue-router'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
import {defineComponent,ref,reactive,watch,onMounted} from 'vue'
import dayjs from 'dayjs'
import {useStore} from 'vuex'
export default defineComponent({
	 components: {
	    MailOutlined,
	    AppstoreOutlined,
	    SettingOutlined,
	  },
	setup(){
		let logoutsure=ref(false)
		let hasoa=ref(false)
		let numData=ref({
			kejifuwu:0,
			xingzhengbangong:0,
			caiwuerdianling:0,
			renshixitong:0,
			keyanxitong:0,
			gudingzichanyi:0,
			houqinxitong:0,
			shitangxitong:0,
			chuchaixitong:0
		})
		let post=ref('--')
		let openKeysdata=ref([])
		let selectedKeys=ref(['home'])
		const $route=useRouter()
		let comyear=dayjs()
		let userInfo={
			roleDescList:[]
		}
		if(localStorage.getItem('ht-new-fixed-user')){
			userInfo=JSON.parse(localStorage.getItem('ht-new-fixed-user'))
		}else{
			
		}
		
		
		
		if(userInfo&&userInfo.userDuties){
			let userWork=''
			switch(Number(userInfo.userDuties.split(','))){
				case 0:
					userInfo.userWork='院领导'
				break;
				case 1:
					userInfo.userWork='副总工'
				break;
				case 2:
					userInfo.userWork='部门负责人'
				break;
				case 3:
					userInfo.userWork='支部书记'
				break;
				case 4:
					userInfo.userWork='中层干部'
				break;
				case 9:
					userInfo.userWork='普通职工'
				break;
			}
		}else{
			userInfo.userWork='--'
		}
		
		let ishongtu=ref(false)
		
		
		if(userInfo&&userInfo.deptList){
			for(let i=0;i<userInfo.deptList.length;i++){
				if(userInfo.deptList[i].deptNo==='BM-000028'){
					ishongtu.value=true 
				}
			}
		}
			  
			  
		if(userInfo&&userInfo.roleList){
			for(let i=0;i<userInfo.roleList.length;i++){
				if(userInfo.roleList[i]==='ADMIN'){
					ishongtu.value=true 
				}
			}
		}
		
		
		
		let isAdmin=ref(false)
		if(userInfo&&userInfo.roleList){
			isAdmin.value = userInfo.roleList.includes('SUPER_ADMIN')
		}else{
			isAdmin.value = false
		}
		
		
		
		
		
		hasoa.value=userInfo.officeNo==='BM-000028'
		
		localStorage.getItem('ht-new-fixed-user')
		let nowyear=ref(comyear)
		const store = useStore();
		const yearChange=()=>{
			store.commit('changenowyear',nowyear.value.format('YYYY'))
		}
		yearChange()
	
		
		
		const onOpenChange= openKeys=>{
			
			
			let nowparent=openKeys[openKeys.length-1]
			
			
			
			openKeysdata.value.splice(0,1,nowparent)
			
			
			console.log(openKeys)
			// for(let i=0;i<menuList.value.length;i++){
			// 	if(menuList.value[i].menuUrl==nowparent){
			// 		if(menuList.value[i].children){
			// 			openKeysdata.value=menuList.value[i].children.map(item=>{
			// 				return item.menuUrl
			// 			})
			// 			openKeysdata.value.push(nowparent)
			// 		}else{
			// 			openKeysdata.value=[nowparent]
			// 		}
					
			// 	}
			// }
			
			
			
			
			 // const latestOpenKey = openKeys.find(key => openKeys.indexOf(key) === -1);
			 //  if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
				// openKeys = openKeys;
			 //  } else {
				// openKeys = latestOpenKey ? [latestOpenKey] : [];
			 //  }
		}
		
		const clickMenu=item=>{
			store.commit('changepage',{
				currentPage:1,
				pageSize:10
			})
			localStorage.setItem('formparams',JSON.stringify({}))
			$route.push({
				path:'/'+item.key
			})
			selectedKeys.value=[item.key]
			
		}
		
		const hideModal=()=>{
			window.location.href=globalVar.tiaozhuanUrl
		}
		const logout=()=>{
			
			logoutsure.value=true
			
			
		}
		
		onMounted(()=>{
			menuList.value=JSON.parse(localStorage.getItem('menuList'))
			callback()
			setTimeout(function(){
				
				getOAData()
				getNewCaiWuData()
				
				
				getChuchaiData()
				
				
				getMessageFromPerson()
				
				
				getNewKJFWData()
				
				
				getNewKeYanData()
				
				
				
				getHouqinData()
				
				getCanteenData()
				
				
			},800)
		})
		
		// 获取行政办公的数据
		const getOAData=()=>{
		      let url = 'http://10.36.15.100:8989/user-center/oa/api/restful/v1/dd/item/getAllItem';
		      //let url = 'http://192.168.220.196:8088/oa/api/restful/v1/dd/item/getAllItem';
		      axios({
		        method: 'get',
		        url: url,
		        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
		      })
		        .then((res) => {
		          if (res.data.code == 1) {
		            let data = res.data.object[0];
		
					for(let key in data){
						numData.value.xingzhengbangong+=Number(data[key].split('|')[0])
						
					}
		          
		             
		           
		          }
		        })
		        .catch(function (error) {
		          console.log(error);
		        });
		
		      // 对错误信息进行处理
		    }
		
		
		
		
		
		
		 //获取财务2.0待办事项
		    const getNewCaiWuData=()=> {
		      axios({
		        method: 'get',
		        url: 'http://10.36.15.100:8989/user-center/financial/restful/system/todoitem/getAllItem',
		        //url: 'http://192.168.220.196:7777/financial/restful/system/todoitem/getAllItem',
		        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
		      })
		        .then((res) => {
		          // this.toLogin(res.data.code);
		          if (res.data.code == 1) {
		           
					let data = res.data.object[0];
					
					for(let key in data){
						numData.value.caiwuerdianling+=Number(data[key].split('|')[0])
						
					}
							          
					 
		          }
		        })
		        .catch(function (error) {
		          console.log(error);
		        });
		    }
			
			//获取食堂系统待办事项
			    const getCanteenData=()=>{
			      let url = 'http://10.36.15.100:8989/user-center/canteen/api/db/getItemListWithUpdate'; //线上
			      //let url = 'http://192.168.53.196:8989/canteen/api/db/getItemListWithUpdate'; //本地
			      let obj = {
			        currentPage: 1,
			        pageSize: 100
			      };
			      axios({
			        method: 'post',
			        url: url,
			        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') },
			        data: obj
			      })
			        .then((res) => {
			          // this.toLogin(res.data.code);
			          if (res.data.code == 1) {
			            let data=res.data.object.dataList
						numData.value.shitangxitong=data.length
						
			          }
			        })
			        .catch(function (error) {
			          console.log(error);
			        });
			    }
			
			//获取后勤系统待办事项
			const getHouqinData=()=>{
			      //let url = 'http://10.36.15.13:81/logistics/api/restful/v1/dd/item/getAllItem';//
			      let url = 'http://10.36.15.100:8989/user-center/logistics/api/restful/v1/dd/item/getAllItem';
			     
			      axios({
			        method: 'get',
			        url: url,
			        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') },
			      })
			        .then((res) => {
			          // this.toLogin(res.data.code);
			          if (res.data.code == 1) {
			            let data=res.data.object[0]
						for(let key in data){
							numData.value.houqinxitong+=Number(data[key].split('|')[0])
							
						}
							
			          }
			        })
			        .catch(function (error) {
			          console.log(error);
			        });
			    }
			
			
			// 获取用户中心信息
			const getZiChanData=()=> {
			      axios({
			        method: 'get',
			        url: 'http://10.36.15.100:8989/user-center/asset/api/system/user/getToDoItemPersonalTotal',
			        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
			      })
			        .then((res) => {
			          // this.toLogin(res.data.code);
			          if (res.data.code == 1) {
			           let data=res.data.object
					   
					   numData.value.gudingzichanyi=data['待办事项数量']
			          }
			        })
			        .catch(function (error) {
			          console.log(error);
			        });
			    }
			 //获取科研系统2.0待办事项
			    const getNewKeYanData=()=> {
			      let url = 'http://10.36.15.100:8989/user-center/research/nky/notice/numList'; //线上
			      //let url = 'http://192.168.220.192:8989/research/nky/notice/numList'; //本地
			      axios({
			        method: 'get',
			        url: url,
			        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
			      })
			        .then((res) => {
			          // this.toLogin(res.data.code);
			          if (res.data.code == 1) {
						let data=res.data.object
						for(let i=0;i<data.length;i++){
							numData.value.keyanxitong+=Number(data[i].num) 
						}
			          }
			        })
			        .catch(function (error) {
			          console.log(error);
			        });
			    }
			
			
		// 获取出差管理系统信息
		    const getChuchaiData=()=> {
		      axios({
		        method: 'get',
		        url: 'http://10.36.15.100:8989/user-center/carsys/api/user/getPersonalToDoItemTotal',
		        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
		      })
		        .then((res) => {
		        
		         numData.value.chuchaisan=res.data.object
		        })
		        .catch(function (error) {
		          console.log(error);
		        });
		    }
			
			
			//获取人事系统代办事项
			const getMessageFromPerson=()=> {
			  axios({
				method: 'get',
				url: 'http://10.36.15.100:8989/user-center/sky/hr/check/notice/list',
				//url: 'http://192.168.53.192:9009/sky/hr/check/notice/list',
				headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
			  }).then((res) => {
				  let data=res.data.object
				
				  for(let i=0;i<data.length;i++){
					 numData.value.renshixitong+=Number(data[i].count) 
				  }
				// this.toLogin(res.data.code);
				
			  });
			}
			
			
			//获取科技服务2.0待办事项
			    const getNewKJFWData=()=> {
			      let url = 'http://10.36.15.100:8989/user-center/kjfw/api/restful/v1/dd/item/list';
			      //let url = 'http://192.168.220.192:8686/kjfw/api/restful/v1/dd/item/list';
			      axios({
			        method: 'get',
			        url: url,
			        headers: { Authorization: localStorage.getItem('ht-new-fixed-token') }
			      })
			        .then((res) => {
			          // this.toLogin(res.data.code);
			          if (res.data.code == 1) {
						let data=res.data.object
						for(let i=0;i<data.length;i++){
							numData.value.kejifuwu+=Number(data[i].count) 
						}  
			            
			          }
			        })
			        .catch(function (error) {
			          console.log(error);
			        });
			    }
		
		
		
		
		let menuList=ref([])
		const callback = val => {
			
		  // assetapisystemmenugetMenuListByRole({roleCode:userInfo.role}).then(e=>{
			 // menuList.value=e.object
			  
			  
			 
			  
		  // }).catch(err=>{
			 //  console.log(err)
		  // })
		};
		
		 
		watch(() => $route.currentRoute.value.path,(toPath) => {
			selectedKeys.value=[toPath.split('/')[1]]
			
			
			for(let i=0;i<menuList.value.length;i++){
				if(menuList.value[i].children){
					for(let j=0;j<menuList.value[i].children.length;j++){
						if(menuList.value[i].children[j].menuUrl==toPath.split('/')[1]){
						
							openKeysdata.value.splice(0,1,menuList.value[i].menuUrl)
						}
					}
				}
				
			}
			
		 },{immediate: true,deep: true})
		 
		 let setenterclass=ref(false)
		 let selfclass=ref(false)
		 const setenter=()=>{
			
			 setenterclass.value=true
		 }
		 const setleave=()=>{
			setTimeout(function(){
				setenterclass.value=false
			},1000) 
		 }
		 
		 
		 const selfenter=()=>{	
		 	selfclass.value=true
		 }
		 const selfleave=()=>{
			setTimeout(function(){
				selfclass.value=false
			},300) 
		 }
		 
		 const switchpage=type=>{
			 if(!isAdmin.value&&type==10){
			 		return
			 }
			 let sys=globalVar.sysUrlArr.filter(item=>{
			 				 return item.id==type
			 })[0]
			 			
			 
			 let url=''
			 
			 if(sys.type==='query'){
			 				url=sys.url+'?token='+ localStorage.getItem('ht-new-fixed-token')+'&&platformNo='+sys.platformNo
			 }else{
			 				url=sys.url+'/'+ localStorage.getItem('ht-new-fixed-token') 
			 }
			 
			 window.location.href=url
		 }
		 
		 
		 const gohome=()=>{
			 window.location.href=globalVar.switchUrl+localStorage.getItem('ht-new-fixed-token')
			//window.location.href="http://10.36.15.9:9090/zhgl/#/switch/"+localStorage.getItem('ht-new-fixed-token')
		 }
		return{
			ishongtu,
			gohome,
			hideModal,
			logoutsure,
			post,
			numData,
			switchpage,
			selfenter,
			selfleave,
			selfclass,
			setleave,
			setenter,
			setenterclass,
			selectedKeys,
			openKeysdata,
			menuList,
			userInfo,
			yearChange,
			logout,
			clickMenu,
			hasoa,
			onOpenChange,
			nowyear
		}
	}
})
</script>

<style>
	.no-bg-picker{
		background:none!important;
	}
</style>
<style scoped>
	
	.title-part{
		display:flex;
		justify-content: space-between;
	}
	.title-part .left{
		flex:1;
		color:rgba(255,255,255,0.5);
	}
	.title-part .right{
		flex:1;
		color:rgba(255,255,255,0.5);
	}
	.sanjiao{
		width: 0;
		height: 0;
		border-top: 7px solid transparent;
		border-right: 14px solid rgba(255,255,255,0.6);
		border-bottom: 7px solid transparent;
		position:absolute;
		left:-14px;
		
	}
	.fanhuipic{
		position:absolute;
		right:34px;
		bottom:8px;
		height:39px!important;
	}
	.sys-wrap img{
		width:80px;
		height:80px;
		margin-bottom:15px;
		
	}
	.sys-wrap{
		padding:25px 25px;
		display:flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.sys-wrap{
		display:none;
		border-radius:12px;
		top:-7px;
		z-index:99999;
		
		position:absolute;
		right:-516px;
		width: 528px!important;
		height: 220px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 20px 0px rgba(146,193,255,0.5);
		backdrop-filter: blur(4px);
		
	}
	.hasoa{
		/* width: 508px!important;
		right:-597px!important; */
		height: 316px!important;
	}
	.side-user-wrap{
		font-size:14px;
		margin: 10px 0;
		padding:10px 0;
		background: url(../assets/sijiaobg.png) no-repeat center;
		background-size:95% 100%;
	}
	
	.bottom-part .author{
		padding-top:10px;
		font-size: 12px;
		color: rgba(255,255,255,0.5);
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.bottom-part .logout img{
		margin-right:10px;
	}
	.bottom-part .logout{
		cursor:pointer;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.opacity{
		left:70px;
		width:40px;
		position:absolute;
		z-index:99999999;
		height:20px;
		
	}
	.click-year{
		cursor:pointer;
	}
	.switch-year{
		display:flex;
		align-items: center;
		justify-content: center;
		padding-top:8px;
	}
	.user-info-wrap .line-splid{
		margin:0 7px;
		width: 1px;
		height: 34px;
		background: rgba(255,255,255,0.5);
	}
	.user-info-wrap .label-top{
		
		font-size: 12px;
		color:rgba(255,255,255,0.5);
		justify-content: center;
		display:flex;
	}
	.user-info-wrap{
		padding:0 10px;
		align-items: center;
		margin-top:8px;
		justify-content: center;
		display:flex;
	}
	.user-info-wrap .left-part{
		text-align: center;
		flex:1;
	}
	.user-info-wrap .right-part{
		text-align: center;
		flex:1;
	}
	.user-wrap{
		font-size:18px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.switch-part img{
		cursor:pointer;
	}
	.switch-part{
		position:relative;
		padding-top:16px;
		padding-right:26px;
		padding-left:26px;
		display:flex;
		justify-content: space-between;
	}
	.side-bar .logo-desc{
		font-family: biaotifix;
		font-size:28px;
		margin-left:9px;
	}
	.side-bar .title-wrap{
		padding-top:16px;
		display:flex;
		justify-content: center;
		align-items: center;
	}
	.side-bar{
		color:#fff;
		position:absolute;
		left:0;
		width:245px;
		height:100%;
		background: linear-gradient(180deg, #55B5FD 0%, #398CFF 100%);
	}
	.bottom-part{
		text-align: center;
		position:absolute;
		bottom:10px;
		width:100%;
		
	}
	
	.menu-part{
		width:102%;
		position:absolute;
		top:316px;
		bottom:0px;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	.top-part{
		text-align: center;
		position:absolute;
		top:0px;
		width:100%;
	}
	.setenterclass{
		display:flex;
	}
	.selfclass{
		display:flex;
	}
	
</style>

